<template>
	<view class="body">
		<view class="tops">
			<view class="right">
				<image class="img" src="../../static/icons/search-active.png" mode=""></image>
				<navigator url="../my/car/car">
					<image class="img" src="../../static/icons/cart2.png" mode=""></image>
				</navigator>
			</view>
		</view>
		
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500">
			<swiper-item v-for="(item,index) in bannerAds" :key="index">
				<image class="img" :src="item.pic" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<!-- 分类导航-->
		<view class="nav">
			<view class="categoryNav" v-for="item in category" :key="item.id">
				<navigator :url="`../kind/kindList/kindList?id=${item.id}`">
					<image class="img1" :src="item.icon"></image>
					<view class="name">
						{{item.name}}
					</view>
				</navigator>
			</view>
		</view>
		<!-- 限时活动 -->
		<view class="active">
			<view class="text">限时活动:</view>
			<swiper  :vertical="true" :autoplay="true" :interval="2500">
				<swiper-item class="swiper-active" v-for="item in active" :key="item.id">
					<view class="name">
						{{item.name}}
					</view>
					<view class="right">
						<view class="price">
							{{item.price}}元
						</view>
						<view class="NOWprice">
							现价:{{item.promotionPrice}}元
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 热门推荐 -->
		<view class="hot">
			<view class="title">
				热门推荐
			</view>
			<view class="box">
				<swiper class="swiper-hot" :display-multiple-items="3" :autoplay="true" :interval="4000" :duration="500">
					<swiper-item v-for="item in hot" :key="item.id">
						<navigator :url="`../kind/kindList/info/info?id=${item.id}`">
							<image class="img2" :src="item.pic"></image>
							<view class="name">
								{{item.name}}
							</view>
						</navigator>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- 新品推荐 -->
		<view class="NewProducts">
			<view class="title">
				新品推荐
			</view>
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view class="box" v-for="item in newproducts" :key="item.id">
					<navigator :url="`../kind/kindList/info/info?id=${item.id}`">
						<image class="img3" :src="item.pic"></image>
						<view class="right">
							<view class="desc">{{item.name}}</view>
							<view class="desc">价格：{{item.price}}</view>
						</view>
					</navigator>
				</view>
			</scroll-view>
		</view>

		<!-- 猜你喜欢 -->
		<view class="like">
			<view class="title">
				猜你喜欢
			</view>
			<view class="list">
				<view class="items" v-for="item in saleMost" :key="item.id">
					<navigator :url="`../kind/kindList/info/info?id=${item.id}`">
					<image class="img4" :src="item.pic"></image>
					<view class="text-area">
						<view class="name">{{item.brandName}}</view>
						<view class="desc">
							<view class="price">{{item.price}}</view>
							<view class="orign">乐居</view>
						</view>
					</view>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		bannerAds,
		recommendList,
		findCategory,
		hotList,
		lejuLatestProducts,
		saleMostProducts
	} from "../../api/home/index.js"

	export default {
		data() {
			return {
				bannerAds: [],
				category: [],
				active: [],
				hot: [],
				newproducts: [],
				saleMost: []
			};
		},
		onLoad() {
			var _this = this
			bannerAds().then(res => {
				// console.log(res)
				_this.bannerAds = res.data.items
			});
			findCategory("1308336521604599809").then(res => {
				// console.log(res)
				_this.category = res.data.category.children
			});
			recommendList().then(res => {
				_this.active = res.data.items
			});
			hotList().then(res => {

				_this.hot = res.data.items
			});
			lejuLatestProducts().then(res => {
				// console.log(res)
				_this.newproducts = res.data.productList
			});
			saleMostProducts().then(res => {
				// console.log(res)
				_this.saleMost = res.data.items
			})
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		background-color: #F1ECE7;

		.top {
			padding-top: var(--status-bar-height);
		}
		.tops{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			position: absolute;
			top: 20px;
			left: 0;
			width: calc(100% - 30px);
			z-index: 999;
			
			.right{
				display: flex;
				align-items: center;
				.img{
					width: 21px;
					height: 21px;
					margin-left: 15px;
				}
			}
		}
		.swiper {
			width: 100%;
			height: 362rpx;

			.img {
				width: 100%;
				height: 362rpx;
			}
		}

		.nav {
			width: 88%;
			margin: 30rpx auto;
			display: flex;
			justify-content: space-between;

			.categoryNav {
				text-align: center;

				.img1 {
					width: 40px;
					height: 40px;
				}

				.name {
					font-size: 16px;
					color: #3e3e3e;
				}
			}
		}

		.active {
			display: flex;
			width: 335px;
			height: 48px;
			margin: 30px auto;
			background-color: #fff;

			.text {
				width: 67px;
				height: 48px;
				font-size: 14px;
				line-height: 48px;
				color: #FFA500;
				margin-left: 20px;
			}

			.swiper-active {
				display: flex;
				justify-content: space-between;
				width: 229px;
				height: 48px;
				overflow: hidden;

				.name {
					width: 125px;
					font-size: 14px;
					line-height: 48px;
					color: #3e3e3e;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.right {
					width: 70px;
					height: 48px;

					.price {
						font-size: 12px;
						color: rgb(51, 51, 51);
						text-decoration: line-through;
					}

					.NOWprice {
						font-size: 12px;
						color: #f00;
					}
				}
			}
		}

		.hot {
			.title {
				width: 95%;
				margin: 0 auto;
				font-size: 16px;
				color: #3e3e3e;
				letter-spacing: 1px;
				font-weight: 600;
				margin-bottom: 30rpx;
			}

			.box {
				width: 95%;
				height: 150px;
				margin: 0 auto;

				.swiper-hot {
					width: 100%;
					height: 100%;

					.img2 {
						width: 104px;
						height: 88px;
					}

					.name {
						font-size: 13px;
						color: #3e3e3e;
						text-align: center;
						font-weight: 600;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						margin-top: 10rpx;
					}
				}
			}
		}

		// 新品推荐
		.NewProducts {
			padding: 0 12px;
			.title {
				width: 95%;
				margin: 20px auto;
				font-size: 16px;
				color: #3e3e3e;
				font-weight: 600;
				letter-spacing: 1px;
			}

			.scroll-view_H {
				height: 130px;
				white-space: nowrap;
				display: inline-block;

				.box {
					display: inline-block;
					width: 295px;
					height: 130px;
					margin-right: 10px;
					background-color: #FFFFFF;
					border-radius: 10px;
					position: relative;
					
					.img3 {
						width: 97px;
						height: 84px;
						position: absolute;
						left: 22px;
						top: 0;
						bottom: 0;
						margin: auto;
					}

					.right {
						width: 160px;
						height: 80px;
						padding-left: 135px;
						padding-top: 25px;
						padding-bottom: 25px;
						flex-wrap: wrap;
						flex-direction: column;

						.desc {
							font-size: 13px;
							color: #3e3e3e;
							margin-bottom: 40px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}

		}


		.like {
			.title {
				width: 95%;
				margin: 20px auto;
				font-size: 16px;
				color: #3e3e3e;
				font-weight: 600;
				letter-spacing: 1px;
			}

			.list {
				width: 92%;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.items {
					width: 162px;
					height: 209px;
					background-color: #FFFFFF;
					border-radius: 5px;
					margin-bottom: 10px;
					border-radius: 12px;
					.img4 {
						width: 162px;
						height: 119px;
						overflow: hidden;
					}

					.text-area {
						width: 126px;
						height: 50px;
						font-size: 13px;
						padding: 18px;

						.name {
							font-weight: 700;
							margin-top: 4px;
							color: #3e3e3e;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.desc {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 10px;
						}
					}
				}
			}
		}
	}
</style>
